<template>
    <div>
        <!-- F1 房间状态 开始 -->
        <div class="room_status_container">
            <div class="roomStatus" v-for="(item, index) in allRooms" :key="index">
                <!-- 房间状态背景图 -->
                <img class="bg" :src="item.src"/>
                <!-- 小图标 -->
                <img class="icon" :src="item.icon"/>
                <!-- 文字 -->
                <div class="text">
                    <p>{{ item.text }}</p>
                    <p>{{ item.num }}</p>
                </div>
            </div>
        </div>
        <!-- F1 房间状态 结束 -->

        <!-- F2 房间详情 开始 -->
        <div class="roomsContainer">
            <Row style="display: flex">
                <Col span="22" push="0">
                    <div class="detail_container">
                        <!-- F2-1 选择器部分 开始 -->
                        <p class="detail_title">房间详情</p>

                        <div class="select_container">
                            <div>
                                <span>入住状态：</span>
                                <Select
                                    size="small"
                                    style="width: 120px"
                                    @on-change="updateRooms"
                                >
                                    <Option
                                        v-for="(status, index) in selectorRoomStatusOptions"
                                        :value="status.value"
                                        :key="index"
                                    >{{ status.description }}
                                    </Option>
                                </Select>
                            </div>
                            <div>
                                <span>房间型号：</span>
                                <Select
                                    clearable
                                    size="small"
                                    style="width: 120px"
                                    @on-change="getCurrentRoom"
                                >
                                    <Option
                                        v-for="room in eachRooms"
                                        :key="room.id"
                                        :value="room.id"
                                    >{{ room.roomNum }}
                                    </Option>
                                </Select>
                                <span style="margin-left: 5px">请输入房号：</span>
                                <Input
                                    placeholder="请输入房号"
                                    size="small"
                                    clearable
                                    style="width: 120px"
                                    v-model="roomNum"
                                    @on-change="InpChange"
                                >
                                </Input>
                                <Button class="searchButton" type="primary" icon="ios-search" @click="queryRoomByRoomNum">查询</Button>
                            </div>
                            <!-- 状态显示 -->
                            <div class="indicators_container">
                                <div>
                                    <img
                                        src="../../../static/images/indicator_1.png"
                                        class="indicator"
                                    />
                                    <span>已入住</span>
                                </div>
                                <div>
                                    <img
                                        src="../../../static/images/indicator_2.png"
                                        class="indicator"
                                    />
                                    <span>可入住</span>
                                </div>
                                <div>
                                    <img
                                        src="../../../static/images/indicator_3.png"
                                        class="indicator"
                                    />
                                    <span>未打扫</span>
                                </div>
                            </div>
                        </div>
                        <!-- F2-1 选择器部分 结束 -->

                        <!-- F2-2 房间列表 开始 -->
                        <!-- 显示所有查询的房间 -->
                        <div v-if="!showCurrentRoom">
                            <div
                                class="floor_container"
                                v-for="(floor, index) in floors"
                                :key="index"
                            >
                                <div>
                                    <h1 :id="floor.floorNum" class="floor_title">
                                        {{ floor.floorNum }}
                                    </h1>
                                    <p class="floor_subtitle">
                                        ({{ floor.canMoveInfoRoomNum }}可入住 /
                                        {{ floor.busyRoomNum }}已入住 /
                                        {{ floor.unCleanRoomNum }}未打扫)
                                    </p>
                                </div>
                                <!-- F2-3-1 入住详情 开始 -->
                                <div class="floor_detail">
                                    <!-- 所有房间 -->
                                    <div
                                        class="eachRoom"
                                        v-for="(room, index) in floor.roomInfoList"
                                        :key="index"
                                        @click="popWindow(room.roomNum, room.id)"
                                    >
                                        <!-- 图片按房间状态进行判断 -->
                                        <img
                                            style="width: 240px"
                                            class="floor_detail_bg"
                                            :src="
                      room.cleanStatus === '0' && room.moveIntoStatus === '0'
                        ? roomsBg[2]
                        : roomsBg[3] || room.moveIntoStatus === '1'
                        ? roomsBg[0]
                        : roomsBg[1]
                    "
                                        />
                                        <div class="floor_text">
                                            <div>
                                                <p>{{ room.roomNum }}</p>
                                                <p>{{ room.roomPart }}</p>
                                            </div>
                                            <div>
                      <span>{{
                              room.cleanStatus === "0" && room.moveIntoStatus === "0"
                                  ? "未打扫"
                                  : "入住中：" && room.moveIntoStatus === "1"
                                      ? "入住中："
                                      : "空闲"
                          }}</span>
                                                <!-- 客人姓名 -->
                                                <div
                                                    style="display: inline"
                                                    v-for="(geusts, index) in room.list"
                                                    :key="index"
                                                >
                                                    <span class="geustsName">{{ geusts.userName }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- F2-3-1 入住详情 结束 -->
                            </div>
                        </div>
                        <!-- 显示当前选择的房间 -->
                        <div v-if="showCurrentRoom">
                            <div class="floor_container">
                                <div>
                                    <h1 :id="currentRoom.floor" class="floor_title">
                                        {{ currentRoom.floor }}
                                    </h1>
                                    <p class="floor_subtitle">
                                        ({{ currentRoom.moveIntoStatus === "0" && currentRoom.cleanStatus === "1" ? "1" : "0" }}可入住
                                        / {{ currentRoom.moveIntoStatus === "1" ? "1" : "0" }}已入住 /
                                        {{ currentRoom.cleanStatus === "1" ? "0" : "1" }}未打扫)
                                    </p>
                                </div>
                                <!-- F2-3-1 入住详情 开始 -->
                                <div class="floor_detail">
                                    <!-- 所有房间 -->
                                    <div class="eachRoom" @click="popWindow(currentRoom.roomNum, currentRoom.id)">
                                        <!-- 图片按房间状态进行判断 -->
                                        <img style="width: 240px"
                                             class="floor_detail_bg"
                                             :src=" currentRoom.cleanStatus === '0' && currentRoom.moveIntoStatus === '0' ? roomsBg[2] : roomsBg[3] || currentRoom.moveIntoStatus === '1' ? roomsBg[0] : roomsBg[1]"
                                        />
                                        <div class="floor_text">
                                            <div>
                                                <p>{{ currentRoom.roomNum }}</p>
                                                <p>{{ currentRoom.roomPart }}</p>
                                            </div>
                                            <div>
                                                <span>{{ currentRoom.cleanStatus === "0" && currentRoom.moveIntoStatus === "0" ? "未打扫" : "入住中：" && currentRoom.moveIntoStatus === "1" ? "入住中：" : "空闲" }}</span>
                                                <!-- 客人姓名 -->
                                                <div
                                                    style="display: inline"
                                                    v-for="(geusts, index) in currentRoom.list"
                                                    :key="index"
                                                >
                                                    <span style="padding-left: 3px">{{ geusts.userName }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- F2-3-1 入住详情 结束 -->
                            </div>
                        </div>
                        <!-- F2-2 房间列表 结束 -->
                        <!-- 加载图标 -->
                        <div v-if="this.floors.length==0" style="text-align: center">
                            <Spin class="loading" size="small"></Spin>
                            <Spin class="loading"></Spin>
                            <Spin class="loading" size="large"></Spin>
                            <h2 style="color: #54a1f1">数据加载中....</h2>
                        </div>
                    </div>
                </Col>
                <!-- 楼层电梯 开始 -->
                <div class="rightSide">
                    <span>楼层</span>
                    <div id="block" ref="block" class="active"></div>
                    <div
                        class="stair"
                        @click="localFloor(item.floorNum, $event)"
                        v-for="(item, index) in floors"
                        :key="index"
                    >
                        {{ item.floorNum }}
                    </div>
                </div>
                <!-- 楼层电梯 结束 -->
            </Row>
        </div>
        <!-- F2 房间详情 结束 -->

        <!-- 入住详情弹窗 开始 -->
        <Modal
            v-model="showWindow"
            :title="curRoomNum"
            @on-ok="ok"
            @on-cancel="cancel"
            width="600px"
        >
            <div style="user-select: none">
                <!-- F1选择日期部分 开始 -->
                <div class="popText timeContinue">
                    <span>住宿时间：</span>
                    <span v-if="currentRoom.moveIntoStatus==='1'" @click="_renewal">房间续时</span>
                </div>
                <Row class="selector">
                    <Col span="10">
                        <Date-picker
                            type="datetime"
                            :value="this.currentRoomLiveTime || this.currentRoom.cleanStatus==='0' ? this.currentRoomLiveTime:this.roomCheckinData.liveTime"
                            @on-change="getSelectedTime(1, $event)"
                            :disabled='!renewal && this.currentRoom.moveIntoStatus==="1" || this.currentRoom.cleanStatus==="0"'
                            :readonly='!renewal && this.currentRoom.moveIntoStatus==="1" || this.currentRoom.cleanStatus==="0"'
                            placeholder="选择日期"
                            style="width: 235px"
                        >
                        </Date-picker>
                    </Col>
                    <Col span="2" style="font-weight: 700">——</Col>
                    <Col span="10">
                        <Date-picker
                            type="datetime"
                            :value='currentRoomLeaveTime'
                            :disabled='!renewal && this.currentRoom.moveIntoStatus==="1" || this.currentRoom.cleanStatus==="0"'
                            :readonly='!renewal && this.currentRoom.moveIntoStatus==="1" || this.currentRoom.cleanStatus==="0"'
                            @on-change="getSelectedTime(0, $event)"
                            placeholder="选择日期"
                            style="width: 235px"
                        ></Date-picker>
                    </Col>
                </Row>
                <!-- F1选择日期部分 结束 -->

                <!-- F2身份信息 开始 -->
                <div class="popText">身份信息：</div>
                <div class="idCardContainer">
                    <!-- F2-1 身份信息内部左侧 开始 -->
                    <identification
                        :renewal="renewal"
                        v-if="showWindow"
                        ref="idCardPicker"
                        @getPersonInfo='showPersonInfo'
                    >
                    </identification>
                    <!-- F2-1 身份信息内部左侧 结束 -->

                    <!-- F2-2 身份信息内部右侧 开始 -->
                    <div class="pickerRightSide">
                        <div class="rightSideButton" @click="goScanIdCard">
                            <img src="/static/images/scanIcon.png"/>
                            <span>信息扫描</span>
                        </div>
                        <div>
                            <div class="rightSideButton" @click="goCheckin">
                                <img src="/static/images/checkinIcon.png"/>
                                <span>客房入住</span>
                            </div>
                        </div>
                    </div>
                    <!-- F2-2 身份信息内部右侧 结束 -->
                </div>
                <!-- F2身份信息 结束 -->
                <!-- F3 入住信息 开始 -->
                <div class="popText">{{ currentRoom.moveIntoStatus === '0' ? '待入住人员:' : '入住人员：' }}</div>
                <div style="padding: 10px">
                    <Table
                        width="100%"
                        class="table"
                        height="200"
                        :columns="guestsInfo"
                        :data="guestsData"
                    ></Table>
                </div>
                <!-- F3 入住信息 结束 -->
            </div>
            <!-- 弹窗 footer 按钮 开始 -->
            <div slot="footer" class="popFooter">
                <Button v-if="currentRoom.moveIntoStatus==='1'" type="error" @click="showCheckOutWindow">退房</Button>
                <Button v-if="currentRoom.cleanStatus==='0'" type="warning" @click="hasClear">已打扫</Button>
                <div>
                    <Button type="default" @click="cancel">取消</Button>
                    <Button type="primary" @click="ok">确定</Button>
                </div>
            </div>
            <!-- 弹窗 footer 按钮 结束 -->
        </Modal>
        <!-- 入住详情弹窗 结束 -->

        <!--  入住详情列表的每一项 弹窗 开始 -->
        <Modal
            v-model="showPersonDetail"
            title="入住人员详情"
            >
            <Table :columns="guestDetailForm" :data="curGeust"></Table>
            <div slot="footer">
                <Button type="default" @click="()=>{
                    this.showPersonDetail = false,
                    this.curGeust=[]
                }">确定</Button>
            </div>
        </Modal>
        <!--  入住详情列表的每一项 弹窗 结束 -->

        <!-- 退房弹窗 开始 -->
        <Modal
            @on-ok="checkOut"
            title="注意"
            v-model="popCheckOut"
            :mask-closable="false">
            <p>确定要退房吗？</p>
        </Modal>
        <!-- 退房弹窗 结束 -->

    </div>
</template>

<script>
import identification from '../Identification/index.vue'

export default {
    components: {
        identification
    },
    data() {
        return {
            // 所有房间状态资源：
            allRooms: [
                {
                    src: require("static/images/checkin_room.png"),
                    icon: require("static/images/checkin.png"),
                    text: "已入住房间(间)",
                    num: "无数据",
                },
                {
                    src: require("static/images/clear_room.png"),
                    icon: require("static/images/clear.png"),
                    text: "可入住房间(间)",
                    num: "无数据",
                },
                {
                    src: require("static/images/dirty_room.png"),
                    icon: require("static/images/dirty.png"),
                    text: "未打扫房间(间)",
                    num: "无数据",
                },
            ],
            //房间图片背景图资源
            roomsBg: [
                "/static/images/checkin_detail_bg.png",
                "/static/images/clear_detail_bg.png",
                "/static/images/dirty_detail_bg.png",
            ],
            //选择器选择房间状态资源
            selectorRoomStatusOptions: [
                {
                    description: "全部",
                    value: "0",
                },
                {
                    description: "可入住",
                    value: "1",
                },
                {
                    description: "已入住",
                    value: "2",
                },
                {
                    description: "未打扫",
                    value: "3",
                },
            ],
            //输入框搜索房间
            roomNum: '',
            //选择器选择房间型号，本地无数据从接口中获取的数据
            selectorRoomsNum: [],
            //   整个酒店的楼层资源，本地无数据，从第一次请求中获取的数据
            floors: [],
            //   整个酒店所有的房间型号，本地无数据，从第一次请求中处理后获取
            eachRooms: [],
            // 选择器或直接点击选择某一个房间后存储的房间资源
            currentRoom: [],
            // 是否显示当前房间
            showCurrentRoom: false,
            // 当前选择的房间状态
            curAllRoomStatus: "",
            //弹窗控制状态
            showWindow: false,
            //退房弹窗
            popCheckOut: false,
            //入住详情弹窗的弹窗控制
            showPersonDetail:false,
            //当前点击的房间号码
            curRoomNum: "",
            //当前点击的房间号id
            curRoomId: "",
            //房间入住时默认时间
            defaultTime: '',
            //当前房间入住的时间
            currentRoomLiveTime:'',
            //当前房间的退房时间
            currentRoomLeaveTime:'',
            //是否续时
            renewal:false,
            //弹窗表单状态数据
            roomCheckinData: {
                liveTime: "",
                leaveTime: "",
                roomId: '',
                newPerson:''
            },
            //需要入住的多个数据
            waitToCheckinList:{
                roomId:'',
                personList:[],
            },
            //弹窗入住表资源
            guestsInfo: [
                {
                    title: "姓名",
                    key: "userName",
                    align:'center',
                    width: 80,
                },
                {
                    title: "性别",
                    key: "sex",
                    width: 60,
                    align:'center',
                },
                {
                    title: "身份证号",
                    key: "idCard",
                    // width: 150,
                    align:'center',
                },
                {
                    title: "入住时间",
                    key: "liveTime",
                    width: 120,
                    align:'center',
                },
                {
                    title: "操作",
                    key: "action",
                    width: 126,
                    align: "center",
                    render: (h, params) => {
                        return h("span", [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "primary",
                                        size: "small",
                                    },
                                    style: {
                                        margin: "0px",
                                    },
                                    on: {
                                        click: () => {
                                            console.log('点击了详情按钮')
                                            this.showPersonDetail = true
                                            console.log(params.row)
                                            this.curGeust.push(this.currentRoom.list[params.row._index])
                                            console.log('=================',this.curGeust)
                                        },
                                    },
                                },
                                "详情"
                            ),

                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        size: "small",
                                    },
                                    style: {
                                        margin: "5px",
                                        display: params.row.newPerson==='1' ? 'inline-block':'none'
                                    },
                                    on: {
                                        click: () => {
                                            this.guestsData.forEach((showListPerson,inRoomIndex)=>{
                                                if(params.row.idCard==showListPerson.idCard){
                                                    this.guestsData.splice(inRoomIndex,1)
                                                }
                                            })
                                            this.waitToCheckinList.personList.forEach((waitInRoomPerson,waitInRoomindex)=>{
                                                this.waitToCheckinList.personList.splice(waitInRoomindex,1)
                                            })
                                            this.queryRoomFloor()
                                            this.searchRoomsStatus()
                                        },
                                    },
                                },
                                "删除"
                            ),
                        ]);
                    },
                },

            ],
            //弹窗入住资源表数据
            guestsData: [],
            //弹窗详情按钮表
            guestDetailForm:[
                {
                    title: "姓名",
                    key: "userName",
                    align:'center',
                },
                {
                   title: "电话",
                    key:'phone',
                    align: "center",
                    width: 110,
                },
                {
                    title: '性别',
                    key:'sex',
                    align: 'center'
                },
                {
                    title: '出生日期',
                    key:'birthday',
                    align: 'center',
                },
                {
                    title: '住址',
                    key:'address',
                    align: "center"
                }
            ],
            //当前房间的每个客人下标
            curGeust:[],
        };
    },
    methods: {
        //从身份证扫描得到的数据
        showPersonInfo(params) {
            //console.log('扫描身份证得到的数据：', params);
        },
        //选择器选择状态后更新界面
        updateRooms(value) {
            if (value === "0") {
                console.log("选择了全部");
                this.showAll = true;
                this.curAllRoomStatus = value;
                this.queryRoomFloor();
            } else if (value === "1") {
                console.log("选择了可入住");
                this.curAllRoomStatus = value;
                //调用查询楼层接口
                this.queryRoomFloor("", "", "0", "", "1"); //参数1：楼层 参数2：朝向 参数3：入住状态 参数4：房间类型 参数5：是否打扫
                //console.log("查询的当前所有可入住的房间：", this.floors);
            } else if (value === "2") {
                console.log("选择了已入住");
                this.curAllRoomStatus = value;
                this.queryRoomFloor("", "", "1", "");
            } else {
                console.log("选择了未打扫");
                this.curAllRoomStatus = value;
                this.queryRoomFloor("", "", "", "", "0");
            }
        },

        //选择器选择房屋型号后更新界面
        getCurrentRoom(value) {
            if (value) {
                let currentRoom = this.eachRooms.filter((item) => item.id == value)[0];
                this.showCurrentRoom = true;
                this.currentRoom = currentRoom;
                this.guestsData = this.currentRoom.list
            } else if (value === undefined && this.curAllRoomStatus === "") {
                this.queryRoomFloor();
                this.showCurrentRoom = false;
            } else if (value === undefined && this.curAllRoomStatus === "0") {
                this.queryRoomFloor();
                this.showCurrentRoom = false;
            } else if (value === undefined && this.curAllRoomStatus === "1") {
                this.queryRoomFloor("", "", "0", "", "1");
                this.showCurrentRoom = false;
            } else if (value === undefined && this.curAllRoomStatus === "2") {
                this.queryRoomFloor("", "", "1", "");
                this.showCurrentRoom = false;
            } else if (value === undefined && this.curAllRoomStatus === "3") {
                this.queryRoomFloor("", "", "", "", "0");
                this.showCurrentRoom = false;
            }
        },

        //使用房间号搜索该房间
        queryRoomByRoomNum() {
            if (!this.roomNum) {
                this.open('请输入查询的房间号')
                return
            }
            this.queryRoomFloor('', '', '', '', '', this.roomNum)
        },

        //搜索框变化
        InpChange() {
            if (!this.roomNum) {
                this.queryRoomFloor()
                this.showCurrentRoom = false
            }
        },

        //定位楼层后动态修改样式
        localFloor(selector, event) {
            let currentEl = event.target;
            let top = currentEl.offsetTop
            this.$refs.block.style.top = top+'px'

            this.$el.querySelector("#" + selector).scrollIntoView();
        },

        //查询所有房间状态接口
        searchRoomsStatus() {
            let url = "/room/queryRoomNumByStatus";
            let adminId = window.$localStorage.getItem("adminId");

            let params = {
                adminId,
            };
            this.$http.post(url, this.common.request(params)).then((res) => {
                if (res.data.code == 200) {
                    let ALLRoomsStatus = res.data.data;
                    // 所有房间的已入住房间数
                    this.allRooms[0].num = ALLRoomsStatus.busyRoomNum;
                    // 所有房间的可入住房间数
                    this.allRooms[1].num = ALLRoomsStatus.canMoveInfoRoomNum;
                    //所有房间的未打扫房间数
                    this.allRooms[2].num = ALLRoomsStatus.unCleanRoomNum;
                } else {
                    this.open(res.data.msg)
                    return;
                }

            });
        },

        //查询各楼层房间接口
        queryRoomFloor(floorNum, orientation, moveIntoStatus, roomPart, cleanStatus, roomNum) {
            let url = "/room/queryRoomFloor";
            let params = {
                adminId: window.$localStorage.getItem("adminId"),
                floorNum,
                orientation,
                moveIntoStatus,
                roomPart,
                cleanStatus,
                roomNum,
            };
            this.$http.post(url, this.common.request(params)).then((res) => {
                if (res.data.code == 200) {
                    this.floors = res.data.data;
                    this.getEachRoom();
                    console.log("当前本地数据", res)
                } else {
                    this.open(res.data.msg)
                    return;
                }
            });
        },

        // 拿取的每一个房间
        getEachRoom() {
            this.eachRooms = [];
            this.floors.forEach((eachFloor) => {
                // 每一层的所有房间
                let currentFloorEvenyRooms = eachFloor.roomInfoList;
                currentFloorEvenyRooms.forEach((rooms) => {
                    this.eachRooms.push(rooms);
                });
            });
        },

        //点击每一个房间进行弹窗并获取当前房间数据
        popWindow(roomNum, roomId) {
            this.currentRoomLeaveTime = ''
            this.currentRoomLiveTime = ''
            console.log("当前点击的房间号：", roomNum, "当前房间的id为：", roomId);
            this.curRoomNum = "房间号：" + roomNum;
            this.curRoomId = roomId;
            this.showWindow = true;
            let currentRoom = this.eachRooms.filter((item) => item.id == roomId)[0];
            this.currentRoom = currentRoom;
            this.guestsData = this.currentRoom.list
            this.getDefaultTime()


            if(this.currentRoom.moveIntoStatus==='1' && this.currentRoom.cleanStatus==='1'){
                console.log('当前待提交的表中的时间：',this.roomCheckinData.leaveTime)
                this.currentRoomLiveTime = this.currentRoom.list[0].liveTime
                this.currentRoomLeaveTime = this.currentRoom.list[0].leaveTime
                this.roomCheckinData.liveTime = this.currentRoom.list[0].liveTime
                this.roomCheckinData.leaveTime = this.currentRoom.list[0].leaveTime
            }else{
                this.roomCheckinData.leaveTime =''
            }

            console.log("直接点击获取的当前房间：", this.currentRoom);
        },
        //获取选择器中的时间
        getSelectedTime() {
            let params = [...arguments];
            if (params[0]) {
                this.roomCheckinData.liveTime = params[1];
                console.log('当前选择的入住时间：', this.roomCheckinData.liveTime)
            } else {
                this.roomCheckinData.leaveTime = params[1];
                console.log('当前选择的退房时间：', this.roomCheckinData.leaveTime)
            }
        },
        //选择器入住时间默认为今天
        getDefaultTime() {
            let localTime = new Date().format("yyyy-MM-dd hh:mm:ss")
            this.defaultTime = localTime
            this.roomCheckinData.liveTime = this.defaultTime
        },
        //点击了房间续时
        _renewal(){
            console.log('已经点了续时')
            this.renewal = !this.renewal
        },
        //入住请求
        goCheckin() {
            let roomCheckinData = this.$refs.idCardPicker.roomCheckinData

            let phoneReg = /^1[3456789]\d{9}$/
            let isIDCard = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/
            if (!this.roomCheckinData.leaveTime) {
                this.open('请选择退房时间')
                return
            } else if (!roomCheckinData.geustName) {
                this.open('需要入住人姓名')
                return
            } else if (!roomCheckinData.geustGender) {
                this.open('需要入住人性别')
                return
            } else if (!roomCheckinData.geustBirthday) {
                this.open('需要入住出生日期')
                return
            } else if (!phoneReg.test(roomCheckinData.geustPhone)) {
                this.open('电话号码格式不正确')
                return
            } else if (!isIDCard.test(roomCheckinData.idCard)) {
                this.open('身份证号码格式不正确')
                return
            }

            let year = new Date(roomCheckinData.geustBirthday).getFullYear()
            let month = new Date(roomCheckinData.geustBirthday).getMonth() + 1
            month = month <= 9 ? '0' + month : month
            let day = new Date(roomCheckinData.geustBirthday).getDate()
            day =  day < 10 ? '0' + day : day
            let birthday = `${year}-${month}-${day}`

            this.roomCheckinData.userName = roomCheckinData.geustName
            this.roomCheckinData.sex = roomCheckinData.geustGender
            this.roomCheckinData.birthday = birthday
            this.roomCheckinData.phone = roomCheckinData.geustPhone
            this.roomCheckinData.address = roomCheckinData.geustAddress
            this.roomCheckinData.avatar = roomCheckinData.idImage
            this.roomCheckinData.idCard = roomCheckinData.idCard
            this.roomCheckinData.roomId = this.curRoomId
            this.roomCheckinData.newPerson = '1'
            console.log('当前扫描获取到的数据：',this.roomCheckinData)

            //如果当前扫描的身份证已入住过了则删除
            this.currentRoom.list.forEach((person,index)=>{
                if(person.idCard===this.roomCheckinData.idCard){
                    this.$nextTick(()=>{
                        this.open('该人员已入住')
                        this.waitToCheckinList.personList.splice(this.waitToCheckinList.personList.length-1,1)
                        this.guestsData.splice(this.guestsData.length-1,1)
                    })
                }
            })


            //将识别区得到的数据push进多人待入住的变量
            this.waitToCheckinList.roomId = this.curRoomId
            this.waitToCheckinList.personList.push(this.roomCheckinData)
            //将当前识别器得到的数据也push进当前显示的数组
            this.guestsData.push(this.roomCheckinData)

            //重置当前弹窗中的时间
            this.roomCheckinData = {
                liveTime: this.roomCheckinData.liveTime,
                leaveTime: this.roomCheckinData.leaveTime,
                roomId: this.curRoomId
            }
            //清空组件中值
            this.$refs.idCardPicker.roomCheckinData = {
                geustName: "",
                geustGender: '',
                geustBirthday: '',
                geustPhone: "",
                geustAddress: "",
                idImage: "",
                idCard: "",
            }
        },

        //弹窗点击确定后发起入住请求
        ok() {
            //是否是续住
            if(this.renewal){
                this.currentRoom.moveIntoStatus='0'
                this.currentRoom.cleanStatus='1'
                console.log('已经进入续住状态')
                let idList = []
                this.currentRoom.list.forEach(item=>{
                    idList.push(item)
                })
                let params = {
                    roomId:this.currentRoom.id,
                    personList: idList,
                }
                 this.$http.post('/person/renewalRoom',this.common.request(params)).then(res=>{
                     if(res.code==200){
                         console.log('当前续住后的时间：',this.roomCheckinData.leaveTime)
                         this.open(res.data.msg)
                         this.showWindow = false;
                         this.queryRoomFloor()
                         this.searchRoomsStatus()
                     }else{
                         this.open(res.msg)
                         this.showWindow = false
                         this.queryRoomFloor()
                         this.searchRoomsStatus()
                     }
                 })
                this.renewal = false
                return;
            }

            if (this.waitToCheckinList.length == 0) {
                this.open('需要入住人员信息')
                return;
            } else if (this.waitToCheckinList.personList.length == 0) {
                this.open('需要入住人员信息')
                return;
            }


            // 发起入住请求
            this.$http.post("/person/checkInRoomBatch", this.common.request(this.waitToCheckinList)).then((res) => {
                if (res.data.code == 200) {
                    this.open(res.data.msg);
                    this.showWindow = false
                    this.queryRoomFloor();
                    this.searchRoomsStatus();
                    //清除待入住数组中的人员信息
                    this.waitToCheckinList.personList = []
                } else {
                    this.open(res.data.msg)
                    this.showWindow = false;
                }
            });
        },
        cancel() {
            this.showWindow = false;
            this.waitToCheckinList.personList = []
            this.renewal = false
            this.queryRoomFloor()
            this.searchRoomsStatus()
        },
        //显示退房弹窗
        showCheckOutWindow() {
            this.popCheckOut = true
        },
        //弹窗确定退房
        checkOut() {
            let url = '/person/checkOutRoom'
            let params = {
                userName: this.currentRoom.list[0].name,
                idCard: this.currentRoom.list[0].idCard,
                liveTime: this.currentRoom.list[0].liveTime,
                leaveTime: this.currentRoom.list[0].leaveTime,
                roomId: this.curRoomId,
            }
            this.$http.post(url, this.common.request(params)).then(res => {
                if (res.data.code == 200) {
                    console.log('退房结果：', res);
                    this.open(res.data.msg)
                    this.showWindow = false
                    this.queryRoomFloor()
                    this.searchRoomsStatus();
                } else {
                    this.open(res.data.msg)
                    return;
                }

            })
        },

        //点击信息扫描
        goScanIdCard() {
            //this.$Message.info("点击了信息扫描");
            this.$refs.idCardPicker.hxgc_ReadIDCard()

        },
        //点击客房入住触发↓方法

        //点击已打扫
        hasClear() {
            this.currentRoomLeaveTime = ''
            let params = {
                id: this.curRoomId,
                adminId: window.$localStorage.getItem("adminId"),
                cleanStatus: '1',
                moveIntoStatus: '0',
                requestType: "UPDATE",
            }
            this.$http.post('/room/managerRoomInfo', this.common.request(params)).then(res => {
                if (res.data.code == 200) {
                    this.open(res.data.msg)
                    this.queryRoomFloor()
                    this.searchRoomsStatus()
                    //初始化当前待入住列表
                    this.waitToCheckinList =  {
                        roomId: '',
                        personList: [],
                    }
                    this.showWindow = false
                } else {
                    this.open(res.data.msg)
                    this.showWindow = false
                    return;
                }


            })
        },
        //提示消息
        open(nodesc) {
            this.$Notice.open({
                title: "提示！",
                desc: nodesc,
            });
        },
    },

    computed: {
     },
    mounted() {
        this.searchRoomsStatus();
        this.queryRoomFloor();
        // let url = '/admin/adminRegister'
        // let params = {
        //     account:'master',
        //     password:'admin123456',
        //     name:'管理员',
        // }
        // this.$http.post(url,this.common.request(params)).then(res=>{
        //     console.log(res)
        // })
    },
};
</script>

<style lang="less" scoped>
// 顶部3个房间状态查看的所有样式
.room_status_container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    // 3个图
    .bg {
        width: 387px;
        height: 120px;
        -webkit-user-drag: none;
    }

    .roomStatus {
        min-width: 250px !important;
        width: 387px;
        height: 120px;
        user-select: none;
        border-radius: 12px;

        &:hover {
            box-shadow: 0px 0px 5px 0px #aaa;
        }
    }

    //   文字
    .text {
        width: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        z-index: 1;
        top: -170px;
        left: 56px;

        p:nth-child(1) {
            color: #fff;
            font-family: "PingFang SC";
            font-style: normal;
            font-weight: 700;
            font-size: 20px;
            line-height: 140%;
        }

        p:nth-child(2) {
            color: #fff;
            font-family: "PingFang SC";
            font-style: normal;
            font-weight: 700;
            font-size: 40px;
            line-height: 140%;
        }
    }

    // 小图标
    .icon {
        position: relative;
        width: 64px;
        height: 64px;
        z-index: 1;
        top: -92px;
        left: 259px;
        -webkit-user-drag: none;
    }
}


// 房间详情文字
.detail_title {
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    margin-bottom: 10px;
    user-select: none;
    padding: 10px;
    border-bottom: 1px solid #ebecf0;
}



// 详情板块
.detail_container {
    box-shadow: 0 0 4px 0px #aaaaaa;
    min-height: 700px;
    user-select: none;
    background-color: #fff;
    border-radius: 1px;
    // 选择器区域
    .select_container {
        padding: 0px 10px 10px 10px;
        margin-bottom: 5px;
        display: flex;
        border-bottom: 1px solid #ebecf0;
        user-select: none;

        div {
            margin-left: 10px;
        }

        .indicators_container {
            flex: 1;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            user-select: none;

            .indicator {
                border-radius: 50%;
            }
        }
    }

    .searchButton {
        // display:flex;
        margin-left: 10px;
        height: 25px;
        //background-color: #19be6b;
        color: #ffff;
        line-height: 10px;
    }

    .floor_container > div {
        margin: 0;
        padding: 16px 24px;
        display: flex;
        align-items: center;

        .floor_title {
            margin-right: 4px;
            font-size: 32px;
            color: #2c343e;
        }

        .floor_subtitle {
            color: #bbbec4;
            font-family: "PingFang SC";
            font-style: normal;
            font-weight: 400;
            font-size: 20px;
            line-height: 140%;
        }

        // 房间入住详情样式
        .floor_detail_bg {
            border-radius: 12px;
        }

        .eachRoom {
            height: 120px;
            margin: 0 4px 24px 4px;
            border-radius: 12px;

            &:hover {
                box-shadow: 0 0 3px 2px #aaa;
            }
        }

        .floor_text {
            height: 110px;
            padding: 10px 10px;
            width: 240px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            top: -120px;

            .geustsName {
                height: 50px;
                //white-space: nowrap;
                text-overflow: ellipsis;
                padding: 4px;
            }

            div:nth-child(1) {
                color: #ffffff;
                font-family: "PingFang SC";
                font-style: normal;
                font-weight: 700;
                font-size: 22px;
                line-height: 140%;
                display: flex;
                justify-content: space-between;
            }

            div:nth-child(2) {
                display: flex;
                flex-wrap: wrap;
                //justify-content: space-between;
                color: #ffffff;
                font-family: "PingFang SC";
                font-style: normal;
                font-weight: 700;
                font-size: 16px;
                line-height: 140%;
            }
        }
    }

    .floor_detail {
        padding: 0 40px 24px 24px;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-evenly;
    }

    .addRoom {
        height: 121.81px;
        width: 240px;
        margin: 0 4px 24px 4px;
        text-align: center;
        line-height: 121px;
        border: 1px dashed #aaa;
        border-radius: 12px;
        color: #939393;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 700;
        font-size: 16px;

        &:hover {
            box-shadow: 0 0 3px 2px #aaa;
        }
    }
    .loading{
        display: inline-block;
        padding: 20px;
    }
}

//右侧楼层显示
.rightSide {
    box-shadow: 0 0 4px 0 #aaaaaa;
    user-select: none;
    position: fixed;
    -ms-transform: translateX(-10px);
    right: 20px;
    margin-left: 16px;
    width: 110px;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .active {
        z-index: 1;
        top: 50px;
        right: 8px;
        transition: 0.3s;
        position: absolute;
        width: 94px;
        height: 57px;
        background-image: linear-gradient(270deg, #65b6ff, #8daaff);
    }

    span {
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 140%;
        text-align: center;
        width: 100%;
        padding: 8px;
        border-bottom: 1px solid #ebecf0;
    }

    .stair {
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 8px;
        margin-bottom: 8px;
        width: 90px;
        height: 57px;
        text-align: center;
        user-select: none;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 140%;
    }
}

//弹窗样式
.selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    margin-top: 10px;
}

.popText {
    margin: 24px 10px 6px 10px;
    font-family: "PingFang SC";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
}

.timeContinue {
    display: flex;
    justify-content: space-between;

    span:nth-child(2) {
        color: #027AFF;
    }
}

// 身份证输入区域样式
.idCardContainer {
    user-select: none;
    display: flex;
    justify-content: space-between;
    padding: 10px;

    .idPicker {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 416px;

        .avatar {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 140px;
            height: 200px;
            border: 2px solid #ebecf0;
            border-radius: 8px;
            margin: 14px 16px 14px 0;
        }
    }

    .idPickerContainer {
        border: 2px solid #ebecf0;
        border-radius: 8px;

        .idInp {
            padding: 0 16px 10px 16px;

            .inpText {
                margin-left: 5px;
            }
        }
    }

    .pickerRightSide {
        //height: 300px;
        //margin-top: 30px;
        padding-top: 28px;
        padding-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        //width: 106px;
        .rightSideButton {
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f7f8fc;
            width: 106px;
            height: 106px;
            border: 2px solid #ebecf0;
            border-radius: 8px;

            img {
                margin-bottom: 5px;
            }

            &:active {
                box-shadow: 0 0 1px 0px #aaa;
                background-color: #f7f8fc4e;
            }
        }
    }

    .inputGroup {
        width: 250px;
        display: flex;
        flex-direction: column;
        padding: 14px 0px 14px 16px;

        div {
            margin: 3px;
        }

        .inpText {
            margin-left: 5px;
        }

        .inp {
            width: 152px;
        }
    }
}

//弹窗页脚
.popFooter {
    display: flex;

    div {
        flex: 1;
    }
}
</style>
